<template>
  <div style="text-align: center; height: 100%">
    <!-- 搜索与添加区域 -->
    <el-row :gutter="20">
      <el-col :span="5">
        <el-select v-model="seekValue" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.merchantName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8"
        ><el-input placeholder="请输入店铺名" clearable>
          <el-button
            slot="append"
            icon="el-icon-search"
          ></el-button> </el-input></el-col
      ><el-col :span="4">
        <el-button
          type="primary"
          size="mini"
          @click="addProductDialogVisible = true"
          >添加商品</el-button
        >
      </el-col>
    </el-row>

    <!-- 默认为不编辑的只读显示数据 -->
    <div v-if="!isOperation" style="margin-top: 20px">
      <el-table
        :data="tableData"
        stripe
        border
        Scoped
        slot
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="comd.id" label="商品ID" width="80">
        </el-table-column>
        <el-table-column prop="comd.commodityName" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="merchantName" label="店铺名称" width="180">
        </el-table-column>
        <el-table-column prop="typeName" label="类型名称"> </el-table-column>
        <el-table-column prop="comd.commodityMoney" label="价格(元)">
        </el-table-column>
        <el-table-column prop="comd.createdTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="comd.isActived" label="是否上架">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.comd.isActived"
              @change="Statechanged(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              @click="handleLoadPicDialog(scope.row.comd.id)"
              style="color: #4d9eff"
              >添加商品图片</el-link
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              plain
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑商品Dialog -->
    <el-dialog
      title="修改商品信息"
      :visible.sync="commodityDialogVisible"
      width="30%"
      center
    >
      <el-form
        :data="tableData"
        :model="editForm"
        ref="editFormRef"
        label-width="70px"
      >
        <!-- 店铺名 -->
        <el-form-item label="商品名称" prop="CommodityName">
          <el-input v-model="editForm.CommodityName"></el-input>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="店铺名称" prop="CommodityShopName">
          <el-input v-model="editForm.CommodityShopName"></el-input>
        </el-form-item>
        <!-- 店铺价格 -->
        <el-form-item label="商品价格" prop="CommodityMoney">
          <el-input v-model="editForm.CommodityMoney"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="commodityDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commodityDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 商品图片Dialog -->
    <el-dialog
      title="商品图片"
      :visible.sync="addPictureDialogVisible"
      width="30%"
    >
      <el-upload
        class="avatar-uploader"
        :action="this.url"
        :show-file-list="false"
      >
        <img v-if="this.dialogImageUrl" :src="this.dialogImageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="this.dialogImageUrl" alt="" />
      </el-dialog>
    </el-dialog>

    <!-- 添加商品 - dialog -->
    <el-dialog
      title="修改商品信息"
      :visible.sync="addProductDialogVisible"
      width="30%"
      center
    >
      <el-form :data="editForm" :model="addCommodityFrom" label-width="70px">
        <!-- 店铺名 -->
        <el-form-item label="商品名称" prop="CommodityName">
          <el-input v-model="addCommodityFrom.CommodityName"></el-input>
        </el-form-item>
        <!-- 店铺价格 -->
        <el-form-item label="商品价格" prop="CommodityMoney">
          <el-input v-model="addCommodityFrom.CommodityMoney"></el-input>
        </el-form-item>
        <!-- 店铺列表 -->
        <el-form-item label="店铺列表" prop="CommodityShopName">
          <el-select v-model="commodityValue" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.merchantName"
              :value="item.id"
              @click.native="handleShopId(item.id)"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 类型列表 -->
        <el-form-item label="类型列表">
          <el-select v-model="typeValue" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.typeName"
              :value="item.id"
              @click.native="handleId(item.id)"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCansel">取 消</el-button>
        <el-button type="primary" @click="addCommodity">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  mounted () {
    this.userId = parseInt(window.sessionStorage.getItem('id'))
    this.getShopList();
    this.getTypeList();
    this.GettableData();
  },
  data () {
    return {
      url: ``,
      userId: 1,
      // 添加图片数据
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      // 类型列表
      typeList: [
      ],
      // 表数据 - 源绑定
      tableData: [
      ],
      // 表数据 - 编辑数据
      editForm: {
        CommodityName: "",
        CommodityShopName: "",
        CommodityMoney: "",
      },

      //店铺添加数据
      addCommodityFrom: {
        CommodityName: "",
        CommodityMoney: "",
        MerchantId: "",
        CommodityTypeId: "",
      },
      // 编辑商品信息对话框
      commodityDialogVisible: false,
      // 添加图片对话框
      addPictureDialogVisible: false,
      // 添加商品对话框
      addProductDialogVisible: false,

      // 商铺列表数据绑定
      commodityValue: "",
      // 类型列表店铺绑定
      typeValue: "",
      // 搜索框绑定数据
      seekValue: "",
      input: "",
      cs: "123123",
      isOperation: false,
      // 选择店铺名查询还是商品名查询
      options: [
      ],
      // headerStyle(){
      //   return '{text-align: center}'
      // },
      // cellStyle(){
      //   return '{text-align: center}'
      // }
    };
  },
  methods: {
    // 读取图片

    // 添加商品
    async addCommodity () {
      this.addCommodityFrom.CommodityMoney = parseInt(this.addCommodityFrom.CommodityMoney);
      await this.$http.post('Commodity', this.addCommodityFrom);
      this.addProductDialogVisible = false;
      this.GettableData()
    },
    // 获取类型列表
    async getTypeList () {
      const { data: res } = await this.$http.get('CommodityType/nopaging');
      this.typeList = res.data
    },
    // 获取店铺列表
    async getShopList () {
      const { data: res } = await this.$http.get(`Merchant/nopaging/${this.userId}`);
      this.options = res.data;
    },
    // 添加图片数据
    handleRemove (file) {
      console.log(file);
    },
    handleDownload (file) {
      console.log(file);
    },
    // 获取商品列表
    async GettableData () {
      const { data: res } = await this.$http.get(`Commodity/GetCommodityById/${this.userId}`);
      console.log(res)
      this.tableData = res.data
    },
    change (e) {
      this.$forceUpdate(e.value);
      return e;
    },
    headCellClass () {
      return "text-align: center; font-size: 12px";
    },
    headClass () {
      return "text-align: center";
    },
    // 编辑
    async handleEdit (index, row) {
      this.commodityDialogVisible = true;
      this.editForm.CommodityName = row.CommodityName;
      this.editForm.CommodityShopName = row.CommodityShopName;
      this.editForm.CommodityMoney = row.CommodityMoney;
    },
    // 编辑完成
    handleEditOk (index, row) {
      this.isOperation = !this.isOperation;
      console.log(index, row);
    },
    // 删除按钮
    handleDelete (index, row) {
      console.log(index, row);
    },
    // 取消按钮
    handleCansel () {
      this.addProductDialogVisible = false;
    },
    async Statechanged (row) { 
      console.log(row)
      const { data: res } = await this.$http.put(`Commodity/statu/${row.comd.id}`, row.comd)
      if (res.code !== 1000) {
        row.isActived = !row.isActived
        return this.$message.error('更新用户状态失败！')
      }
      return this.$message.success('更新用户状态成功！')
    },
    // 传入类型Id
    handleId (id) {
      this.addCommodityFrom.CommodityTypeId = id
    },
    //传入店铺id
    handleShopId (id) {
      this.addCommodityFrom.MerchantId = id
    },
    handleLoadPicDialog (id) {
      this.addPictureDialogVisible = true
      this.url = `http://localhost:5000/CommodityPicture/uploadfiles/${id}`
      this.getHead(id)
    },
    // 根据商品id获取头像
    async getHead (id) {
      await this.$http({
        url: `http://localhost:5000/CommodityPicture/${id}`,
        method: 'get',
        responseType: 'blob'
      }).then(({ data }) => {
        console.log(data)
        const blob = new Blob([data])
        const url = URL.createObjectURL(blob)
        this.dialogImageUrl = url
      }
      )
    },
  },
};
</script>

<style scoped>
* {
  margin: auto;
  list-style: none;
}
.el-table-column {
  margin: 0px;
}
.el-form-item {
  margin-top: 1rem;
}
.el-bottom {
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.el-upload{
  background-color:red;
}
</style>
